import React from 'react';
import { AsyncStorage, View } from 'react-native';
import { px2dp } from 'rn-xiaobu-utils';
import { routeCollection } from '../components/public/confs/StorageKeys';
import ScrollTabView from '../components/public/tabscroll/ScrollTabView';
// import routerData from '../components/RouteDetails/FakeData'
import RouteDetailOnePage from '../components/RouteDetails/components/RouteDetailOnePage';
import fontsize from '../configs/fontsize';
import { iconDefaultColor } from '../configs/skin';
import { defaultStackOptions } from '../utils/DefaultTitleOption';
// tab名称
const titles = []
// tab对应的view
const views = []

export default class RouteDetails extends React.Component {
  static navigationOptions = ({ navigation }) => {
    let option = defaultStackOptions({ navigation })
    option.headerTitle = '线路规划'
    return option
  }

  constructor(props) {
    super(props)
    this.state = {
      routerData: [],
      views: [],
      titles: []
    }
  }

  sectionToChinese(section) {
    var chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
    var chnUnitChar = ['', '十', '百', '千'];
    var strIns = ''; var chnStr = '';
    var unitPos = 0;
    var zero = true;
    while (section > 0) {
      var v = section % 10;
      if (v === 0) {
        if (!zero) {
          zero = true;
          chnStr = chnNumChar[v] + chnStr;
        }
      } else {
        zero = false;
        strIns = chnNumChar[v];
        strIns += chnUnitChar[unitPos];
        chnStr = strIns + chnStr;
      }
      unitPos++;
      section = Math.floor(section / 10);
    }
    return chnStr;
  }
  async getRouteDetail() {
    await AsyncStorage.getItem(routeCollection).then((result)=>{
      result = JSON.parse(result)
      result.forEach((ele, index)=>{
        views.push(
          <RouteDetailOnePage key={index + 'routedetailonepage'} busNames={ele.BUSNAMES}
            allStationNumber={ele.ALL_STOP_NUMBER}
            allPrice={ele.LINE_PRICE / 100} steps={ele.STEPS}></RouteDetailOnePage>
        )
        titles.push('线路' + this.sectionToChinese(index + 1))
      })
      this.setState({ views: views, titles: titles })
    })
  }

  componentWillMount() {
    this.getRouteDetail()
  }
  render () {
    return (
      <View style={{ backgroundColor: '#F2F5F6', height: '100%' }}>
        <View style={{ marginTop: px2dp(16) }}>
          <ScrollTabView
            tabBarActiveTextColor={iconDefaultColor}
            tabBarInactiveTextColor="#CCCCCC"
            tabWidth={px2dp(120)}
            tabHeight={px2dp(42)}
            tabTextStyle={fontsize.fontsize22}
            titles={titles}
            index={this.props.navigation.getParam('index')}
          >
            {/* 展示页面 */}
            {this.state.views}
          </ScrollTabView>
        </View>
      </View>
    )
  }
}
